import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from 'react-redux';
import ajax from './utils/request/';
import { CSSTransitionGroup } from 'react-transition-group';

import Button from './component/Button/';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      items: []
    }
  }
  componentDidMount() {
    let that = this;
    let a = 'ROLLED';
    ajax({
      url: '/rolledImage/imgListAll',
      method: 'post',
      headers: { 'Content-type': 'text/xml' },
      data: a
    }, function (res) {
      console.log('res', res);
      setTimeout(() => {
        that.setState({
          items: [1, 4, 5]
        })
      }, 1000)

    })
  }

  render() {
    console.log('render-->');
    let store = this.props.$index;
    let items = this.state.items.map((val, index) => (
      <li key={index} onClick={
        () => {
          let items = this.state.items;
          console.log('index', index)
          items.splice(index, 1);
          this.setState({
            items
          })
        }}>{val}</li>))
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to {store.name}</h1>
        </header>
        <div className="test">
          <div>1</div>
          <div>2</div>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <span onClick={this.props.onClick}>点我改变名字</span>

        <Button type="primary" iconType='sync'>
          测试
        </Button>
        <div>
          <CSSTransitionGroup
            transitionName="example"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}>
            {items}
          </CSSTransitionGroup>
        </div>

      </div>
    );
  }
}

export default connect(
  ({ $index }) => ({
    $index
  }),
  (dispatch, ownProps) => ({
    onClick: () => {
      dispatch({
        type: 'GET_MENU',
      })
    }
  })
)(App);
